<template>
	<view class="">
		<view class="bgimg" :style="{ backgroundImage: 'url(' + bgJoin + ')' }">
		</view>
		<view class="container">
			<view class="f-list u-flex u-border-bottom u-row-between" v-for="(item, index) in list" :key="index">
				<view class="f-item">
					<view class="u-font-32 u-p-20">
						{{item.system}}
					</view>
					<view class="title u-m-b-20">
						<text class="rq u-p-20">{{item.time}}</text>
					</view>
				</view>
				<view class="xz u-p-r-20">
					{{item.money}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				bgJoin: this.$mAssetsPath.bjJoin,
				list: [{
						system: '支出',
						time: '2020-10-08    15:26:18',
						money: '18000元'
					},
					{
						system: '支出',
						time: '2020-10-08    15:26:18',
						money: '18000元'
					},
					{
						system: '支出',
						time: '2020-10-08    15:26:18',
						money: '18000元'
					},
					{
						system: '支出',
						time: '2020-10-08    15:26:18',
						money: '18000元'
					},
					{
						system: '支出',
						time: '2020-10-08    15:26:18',
						money: '18000元'
					},
					{
						system: '支出',
						time: '2020-10-08    15:26:18',
						money: '18000元'
					},
					{
						system: '支出',
						time: '2020-10-08    15:26:18',
						money: '18000元'
					},
				]
			}

		},
		onLoad(options) {},
		methods: {},

	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F4F4F4FF;
	}

	.container {
		background-color: #ffffff;
		border-radius: 20rpx;
		width: 90%;
		margin: 0 auto;
		position: relative;
		top: -60rpx;
	}

	.bgimg {
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 -40px;

		padding: 130rpx 30rpx 30rpx 30rpx;
	}


	.xz {

		font-size: 36rpx;

		color: #4B9CFF;

	}

	.rq {

		font-size: 28rpx;
		color: #888D99;
	}
</style>
